<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>看图说话</title>
    <link rel="stylesheet" href="resources/test1.css">
</head>

<body>
    <div id="app">
        <div id="main_div">
            <div class="son_div">
                <div class="son_son_div"></div>
            </div>
            <div class="son_div">
                <div class="son_son_div"></div>
            </div>
            <div class="son_div">
                <div class="son_son_div"></div>
            </div>
        </div>
        <br>
        <div id="content_div">
            <div id="form_div">
                <form id="imageForm">
                    keyword<input type="text" name="keyword" id="keyword_input" v-model="keyword">
                    <br>
                    R：<input type="radio" name="r18" value="0" v-model="r_switch">关闭
                    <input type="radio" name="r18" value="1" v-model="r_switch">开启
                    <br>
                    size
                    <br><select name="size" id="size_selector" v-model="size">
                        <option value="small">*最小*首页略缩图</option>
                        <option value="regular">*中等*作品页面展示图</option>
                        <option value="origin">*最大*原图</option>
                    </select>
                    <br>
                    <div id="btn_div">
                        <input type="button" value="提交" id="submit_btn" class="btn" @click="fetchPic()">
                        <input type="reset" value="重置" id="reset_btn" class="btn">
                    </div>
                </form>
            </div>
            <div id="result_div">
                <div id="pic_div">
                    <img id="pic_img" :src="pic_url" alt="" v-show="pic_url && !return_msg">
                </div>
                <p v-show="return_msg && !pic_url">{{ return_msg }}</p>
            </div>
        </div>

        <footer>
            <p>- Rohdes Island -</p>
            <p>All Rights Reserved.</p>
        </footer>
    </div>

    <!-- 导入vue3 模块 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- 导入axois模块 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="resources/test1.js"></script>

</body>

</html>